﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Advertisement.aspx.cs" Inherits="Liguo.Store.Advertisement" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../css/slide.css" rel="stylesheet" />
    <style>
        body {
            background:#F9F9F9;
        }
    </style>
    <script src="../js/slide.js"></script>
</head>
<body>
    <div id="slide">
        <ul id="img">
            <li><a href="#">
                <img src="../res/slide/slide1.png" class="simg" /></a></li>
            <li><a href="#">
                <img src="../res/slide/slide2.png" class="simg" /></a></li>
            <li><a href="#">
                <img src="../res/slide/slide3.png" class="simg" /></a></li>
            <li><a href="#">
                <img src="../res/slide/slide4.png" class="simg" /></a></li>
            <li><a href="#">
                <img src="../res/slide/slide5.png" class="simg" /></a></li>
        </ul>
        <ul id="num">
            <li class="hover">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script type="text/javascript">
        var img = document.getElementById("img");
        var num = document.getElementById("num");
        var ali = img.getElementsByTagName("li");
        var oli = num.getElementsByTagName("li");
        var time = null
        lanrenzhijiaing = document.getElementById("lanrenzhijia");
        img.style.width = ali.length * 600 + "px", inow = 0;
        for (var i = 0; i < oli.length; i++) {
            oli[i].index = i
            oli[i].onmouseover = function () {
                inow = this.index;
                tab();
                window.clearInterval(time)
            }
            oli[i].onmouseout = function () {
                time = window.setInterval(autoPlay, 2000)
            }
        }

        function tab() {
            for (var i = 0; i < oli.length; i++) {
                oli[i].className = ""
            }
            oli[inow].className = "hover"
            startMove(img, {
                left: -inow * 600
            }, 'buffer')
        }

        function autoPlay() {
            inow++;
            if (inow >= ali.length) {
                inow = 0
            }
            tab();
        }
        time = window.setInterval(autoPlay, 2000)
    </script>
</body>
</html>
